<template>
  <div class="_wz_safetyMeetingsAdd">
    <Form ref="formAdd" :model="formData" label-position="right" :label-width="110" :rules="ruleValidate">
      <Row>
        <i-col span="12">
          <FormItem label="会议标题" prop="meetingTheme">
            <i-input v-model="formData.meetingTheme" placeholder="请填写会议标题" clearable />
          </FormItem>
        </i-col>
        <i-col span="12">
          <FormItem label="会议类型" prop="meetingType">
            <i-select v-model.number="formData.meetingType" filterable placeholder="请选择会议类型" :label-in-value="true" clearable>
              <Option :value="1">安全生产例会</Option>
              <Option :value="2">领导小组会议</Option>
            </i-select>
          </FormItem>
        </i-col>
        <i-col span="12">
          <FormItem label="运输企业" prop="deptUuid">
            <i-select v-model="formData.deptUuid" filterable placeholder="请选择运输企业" :label-in-value="true" clearable>
              <Option v-for="item in subDeptList" :value="item.uuid" :key="item.uuid">{{ item.deptName }}</Option>
            </i-select>
          </FormItem>
        </i-col>
        <i-col span="12">
          <FormItem label="会议地点" prop="meetingSite">
            <i-input v-model="formData.meetingSite" placeholder="请填写会议地点" clearable />
          </FormItem>
        </i-col>
        <i-col span="12">
          <FormItem label="会议时间" prop="wzMeetingStartDate">
            <DatePicker type="date" placeholder="请选择会议时间" style="width: 100%;" split-panels v-model="formData.wzMeetingStartDate"></DatePicker>
          </FormItem>
        </i-col>
        <i-col span="12">
          <FormItem label="截至日期" prop="wzMeetingEndDate">
            <DatePicker type="date" split-panels v-model="formData.wzMeetingEndDate" placeholder="请选择参会截至日期"></DatePicker>
          </FormItem>
        </i-col>
        <i-col span="12">
          <FormItem label="主持人" prop="meetingEmcee">
            <i-input v-model="formData.meetingEmcee" placeholder="请填写主持人" clearable />
          </FormItem>
        </i-col>
        <i-col span="12">
          <FormItem label="记录人" prop="meetingRecorder">
            <i-input v-model="formData.meetingRecorder" placeholder="请填写记录人" clearable />
          </FormItem>
        </i-col>
      </Row>
      <FormItem label="从业身份" prop="meetingDriverType">
        <CheckboxGroup v-model="formData.meetingDriverType">
          <Checkbox v-for="item in personType" :label="item.code" :key="item.code">{{item.value}}</Checkbox>
        </CheckboxGroup>
      </FormItem>
      <Row>
        <i-col span="8">
          <FormItem label="视频附件">
            <Upload name="meetingMaterialFirstFile" :before-upload="meetingMaterialFirstFileFun" action="" style="display: inline-block;">
              <Button icon="ios-cloud-upload-outline">选择视频附件（仅支持MP4）</Button>
            </Upload>
            <i-input v-if="!!formData.meetingMaterialFirstName" v-model="formData.meetingMaterialFirstName" placeholder="请填写素材名称" clearable />
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="文档附件">
            <Upload name="meetingMaterialSecondFile" :before-upload="meetingMaterialSecondFileFun" action="" style="display: inline-block;">
              <Button icon="ios-cloud-upload-outline">选择文档附件（仅支持docx）</Button>
            </Upload>
            <i-input v-if="!!formData.meetingMaterialSecondName" v-model="formData.meetingMaterialSecondName" placeholder="请填写素材名称" clearable />
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="文档附件">
            <Upload name="meetingMaterialThirdlyFile" :before-upload="meetingMaterialThirdlyFileFun" action="" style="display: inline-block;">
              <Button icon="ios-cloud-upload-outline">选择文档附件（仅支持docx）</Button>
            </Upload>
            <i-input v-if="!!formData.meetingMaterialThirdlyName" v-model="formData.meetingMaterialThirdlyName" placeholder="请填写素材名称" clearable />
          </FormItem>
        </i-col>
      </Row>

      <FormItem label="会议纪要" prop="meetingContent">
        <tinymce :htmlData="formData.meetingContent" :height="500" @tinymceData="val => formData.meetingContent = val"></tinymce>
      </FormItem>
      <FormItem label="备注" prop="remark">
        <i-input v-model="formData.remark" placeholder="请填写备注" type="textarea" :autosize="{minRows: 5,maxRows: 5}" />
      </FormItem>
      <div class="demo-drawer-footer" style="z-index: 3;">
        <Button style="margin-right: 8px" @click="$emit('closeFun', false)">取消</Button>
        <Button type="primary" @click="addSubmit('formAdd')">提交</Button>
      </div>
    </Form>


  </div>
</template>
<script>


import tinymce from "../../../components/table/tinymce";
  export default {
    props: ["selectData"],//接收来自父组件的数据
    components: {
      tinymce,
    },
    data() {
      return {
        personType:[],
        uploadProgress: 0,//文件上传进度
        //素材1
        meetingMaterialFirstFile: {
          data: null
        },
        //素材2
        meetingMaterialSecondFile: {
          data: null,
        },
        //素材3
        meetingMaterialThirdlyFile: {
          data: null,
        },
        subDeptList: [],//运输企业
        formData: {
          meetingDriverType:[],
          meetingType:2,
        },//表单数据
        ruleValidate: {//正则
          meetingDriverType: [
            {type: "array", required: true, message: "请至少选择一个从业身份", trigger: "change"}
          ],
          meetingTheme: [
            {required: true, message: '请填写会议主题', trigger: 'blur'}
          ],
          meetingType:[
            {type: 'number', required: true, message: '请选择会议类型', trigger: 'blur'}
          ],
          deptUuid: [
            {required: true, message: '请选择运输企业', trigger: 'blur'}
          ],
          wzMeetingStartDate: [
            {type: "date", required: true, message: '请选择会议时间', trigger: 'blur'},
          ],
          meetingSite: [
            {required: true, message: '请填写会议地点', trigger: 'blur'}
          ],
          meetingEmcee: [
            {required: true, message: '请填写主持人', trigger: 'blur'}
          ],
          meetingRecorder: [
            {required: true, message: '请填写记录人', trigger: 'blur'}
          ],
          meetingContent: [
            {required: true, message: '请填写会议纪要', trigger: 'blur'}
          ],
          wzMeetingEndDate: [
            {type: "date", required: true, message: "请选择参会截至日期", trigger: "blur"}
          ]
        },
      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态
    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      var that = this;

      //运输企业
      that.axios.post(that.apiUrl.coreDeptCoreDeptList,{}).then(res => {
        if (!!res) {
          that.subDeptList = res.data.data;
          if (!!!that.formData.deptUuid) {
            that.formData.deptUuid = that.subDeptList[0].uuid;
            that.formData.deptName = that.subDeptList[0].deptName;
          }
        }
      }).catch(err => {
        console.log("失败", err)
      })

      //从业类型
      that.axios.post(that.apiUrl.systemDictSystemDictList, {type: 'person_type'}).then(res => {
        if (!!res) {
          that.personType = res.data.data;
          if (!that.selectData.id) {//添加
            let userId = [];
            res.data.data.forEach(function (k, i) {
              userId.push(k.code)
            })
            that.$set(that.formData, 'meetingDriverType',userId)
          }
        }
      }).catch(err => {
        console.log('失败', err);
      })


      if (!that.selectData.id) {
        that.formData = { meetingType:1};//表单
      } else {
        var data = JSON.parse(JSON.stringify(that.selectData));//表单
        data.wzMeetingStartDate = new Date(data.meetingStartDate);
        data.wzMeetingEndDate = new Date(data.meetingEndDate);
        data.meetingDriverType = !!data.meetingDriverType?data.meetingDriverType.split(','):[];
        that.formData = data;//表单

      }
    },
    methods: {//执行的方法
      //提交表单
      addSubmit(data) {
        var that = this;
        that.$refs[data].validate((valid) => {
          if (valid) {//正则判断使用
            var data = that.formData;
            var formData = new FormData();

            //素材1
            !!that.meetingMaterialFirstFile.data ? formData.append('meetingMaterialFirstFile', that.meetingMaterialFirstFile.data) : "";
            //素材2
            !!that.meetingMaterialSecondFile.data ? formData.append('meetingMaterialSecondFile', that.meetingMaterialSecondFile.data) : "";
            //素材3
            !!that.meetingMaterialThirdlyFile.data ? formData.append('meetingMaterialThirdlyFile', that.meetingMaterialThirdlyFile.data) : "";

            //参会截至日期
            data.meetingEndDate = that.public.timeFormatting(data.wzMeetingEndDate, "yyyy-MM-dd");

            //人员中文
            data.meetingDriverTypeName = that.public.extractName(that.personType, data.meetingDriverType, {
              uniqueValue: 'code',
              name: 'value',
            }).value.join(',')//从业身份中文

            //会议时间
            !!data.wzMeetingStartDate ? data.meetingStartDate = that.public.timeFormatting(data.wzMeetingStartDate, "yyyy-MM-dd") : '';
            for (var key in data) {
              if (!!data[key]) {
                formData.append(key, data[key]);
              }
            }
            that.axios.post(that.apiUrl.webApi + "/safety/meeting/meetingRecordSaveOrUpdate", formData,that.public.parameterUploadProgress(that)).then(res => {
              that.$Spin.hide();
              if (!!res) {
                that.$Message.success("保存成功");
                that.$emit("closeFun", true)
              }
            }).catch(err => {
              console.log('失败', err);
            })
          } else {
            that.$Message.error('请正确填写表单');
          }
        })
      },
      //素材1
      meetingMaterialFirstFileFun(file) {
        var that = this;
        let type = file.name.substr((file.name.lastIndexOf(".") + 1));
        if (type == "MP4" || type == "mp4") {//视频
          that.$set(that.formData, 'meetingMaterialFirstName', '')//
          that.formData.meetingMaterialFirstName = file.name.substr(0,file.name.lastIndexOf("."));
          that.meetingMaterialFirstFile.data = file;
        } else {
          that.$Message.error('请选择mp4的文件进行上传');
        }
        return false;
      },
      //素材2
      meetingMaterialSecondFileFun(file) {
        var that = this;
        let type = file.name.substr((file.name.lastIndexOf(".") + 1));
        if (type == "DOCX" || type == "docx") {//视频
          that.$set(that.formData, 'meetingMaterialSecondName', '')//
          that.formData.meetingMaterialSecondName = file.name.substr(0,file.name.lastIndexOf("."));
          that.meetingMaterialSecondFile.data = file;
        } else {
          that.$Message.error('请选择docx的文件进行上传');
        }
        return false;
      },
      //素材3
      meetingMaterialThirdlyFileFun(file) {
        var that = this;
        let type = file.name.substr((file.name.lastIndexOf(".") + 1));
        if (type == "DOCX" || type == "docx") {//视频
          that.$set(that.formData, 'meetingMaterialThirdlyName', '')//
          that.formData.meetingMaterialThirdlyName = file.name.substr(0,file.name.lastIndexOf("."));
          that.meetingMaterialThirdlyFile.data = file;
        } else {
          that.$Message.error('请选择docx的文件进行上传');
        }
        return false;
      },

    },
    watch: {//监听

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
<style lang="less">
  ._wz_safetyMeetingsAdd {

    .demo-upload-list {
      display: inline-block;
      width: 200px;
      height: 140px;
      text-align: center;
      line-height: 140px;
      border-radius: 4px;
      overflow: hidden;
      background: #fff;
      position: relative;
      border: 1px solid rgba(0, 0, 0, .2);
      margin-right: 4px;

      img {
        width: 100%;
        height: 100%;
      }

      .demo-upload-list-cover {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .6);

        i {
          color: #fff;
          font-size: 40px;
          cursor: pointer;
          margin: 0 2px;
        }
      }
    }

    .demo-upload-list:hover .demo-upload-list-cover {
      display: block;
    }
  }

  .ql-container{
    height: 150px;
  }

</style>
